<!--  -->
<template>
  <div>
    <img :src="imgUrl" :style="{ width: size + 'rpx', height: size + 'rpx' }" />
    <!-- <img src="/static/svg/home.svg" alt="" /> -->
  </div>
</template>

<script>
import { BASE64 } from 'jsbase64'
export default {
  name: '',
  components: {
  },
  data () {
    return {
    }
  },
  props: {
    imgUrl: [String],
    size: {
      type: [Number, String],
      default: 40
    },
    color: [String]

  },
  created () {
    if (this.color) {
      wx.getFileSystemManager().readFile({
        filePath: this.src,
        encoding: 'binary',
        success: (res) => {
          const reg = /fill="#[a-zA-Z0-9]{0,6}"/g
          let str = ''
          if (reg.test(res.data)) {
            str = res.data.replace(reg, 'fill="' + this.color + '"')
            const base64 = BASE64.encode(str)
            this.imgUrl = 'data:image/svg+xml;base64,' + base64
          } else {
            str = res.data.replace(/<path\s/g, '<path fill="' + this.color + '" ')
            const base64 = BASE64.encode(str)
            this.imgUrl = 'data:image/svg+xml;base64,' + base64
          }
        }
      })
    }
  },
  computed: {},

  mounted () { },

  methods: {}
}
</script>

<style >
</style>